<template>
  <view class="orderInfo_container">
    <!-- 订单状态 -->
    <view style="position: relative; top: 0; height: 346.83rpx">
      <view class="orderStatus">
        <view>{{ orderStatus }}</view>
        <view>
          {{
            orderStatus === '已完成'
              ? '感谢您在商城购物!'
              : orderStatus === '已取消'
              ? '取消时间：' + order.updateTime
              : '请耐心等待~~'
          }}
        </view>
      </view>
      <view class="address">
        <view class="one_line">
          <text>{{ name }}</text>
          <text>{{ phone }}</text>
        </view>
        <view class="two_line">
          <image :src="staticUrl() + '/carts/position.png'" mode="aspectFit"></image>
          <text>{{ order.consigneeDetail }}</text>
        </view>
      </view>
    </view>

    <view v-if="orderItems.length">
      <Order :temporary_list="temporary_list" :orderItems="orderItems"> </Order>
    </view>

    <view class="payment">
      <view>
        <text>商品总价</text> <text>￥{{ order.goodsPrice }}</text>
      </view>
      <view>
        <text>运费</text> <text>+￥{{ order.freightPrice }}</text>
      </view>
      <view>
        <text>优惠</text> <text>-￥{{ order.discountPrice }}</text>
      </view>
      <view>
        <text>优惠券</text> <text>-￥{{ order.couponPrice || 0 }}</text>
      </view>
      <view v-if="order.orderStatus !== 'CANCELLED' && order.orderStatus !== 'UNPAID'">
        <text>已付金额：</text>
        <text>￥{{ order.flowPrice }}</text>
      </view>
      <view v-if="order.orderStatus === 'CANCELLED' || order.orderStatus === 'UNPAID'">
        <text>应付金额：</text>
        <text>￥{{ order.flowPrice }}</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="orderInfo">
      <view class="title">订单信息</view>
      <view class="item">
        <text>订单编号</text> <text>{{ order.sn || '' }}</text>
      </view>
      <view class="item">
        <text>下单时间</text> <text>{{ order.createTime || '' }}</text>
      </view>
      <view class="item">
        <text>支付方式</text> <text>{{ paymentMethodValue || '' }}</text>
      </view>
      <view class="item">
        <text>配送方式</text> <text>{{ order.logisticsName || '' }}</text>
      </view>
      <view class="item">
        <text>订单备注</text> <text>{{ order.remark || '' }}</text>
      </view>
    </view>

    <view style="height: 124rpx"></view>

    <!-- bottom -->
    <view class="bottom">
      <text v-if="order.orderStatus !== 'UNPAID' && order.orderStatus !== 'CANCELLED'"
        class="afterSales" @click="afterSaleStatus(order.afterSaleStatus)">
        {{ order.afterSaleStatus ? '查看售后' : '申请售后' }}
      </text>

      <text v-for="(item, index) in setOrderButton()" :key="index"
        @click="orderStatusBtn(item.title)" :class="item.styles">
        {{ item.title }}
      </text>
    </view>

    <Dialog :dialog="dialog" :title="title" :content="content" @confirm="dialogConfirm"
      @cancel="dialogCancel">
    </Dialog>
  </view>
</template>

<script>
import jwtDecode from 'jwt-decode'
import Dialog from '@/components/dialog'
import Order from '@/components/order/index.vue'
import {
  orderDetails,
  orderAgainPay,
  remindShipment,
  buyAgain,
  cancellationOrder
} from '@/api/order/index.js'
import { addToCart } from '@/api/home/index'

export default {
  components: { Dialog, Order },
  data () {
    return {
      orderStatus: '',
      name: '',
      phone: '',
      address: '',
      temporary_list: [],
      openArrowText: '全部打开',
      openArrow: '/carts/moreRule.png',
      goodsPrice: '',
      sn: '',
      orderStatus: '',
      paymentMethodValue: '',
      orderItems: [],
      order: '',
      dialog: false,
      title: '',
      content: ''
    }
  },
  onLoad (e) {
    this.sn = e.sn
    let a = JSON.parse(jwtDecode(uni.getStorageSync('token')).userContext.replace('\\', ''))
    this.name = a.name
    this.phone = a.username
    this.getBasicInfo()
  },
  methods: {
    dialogCancel () {
      this.dialog = false
    },
    // 售后按钮
    afterSaleStatus (val) {
      if (val) {
        // 查看售后
        getAfterOrderInfo(this.sn, { snType: 'ORDER' }).then(res => {
          if (res.code === 200) {
            uni.navigateTo({ url: '/pages/afterSales/afterSalesInfo?sn=' + res.data.sn })
          }
        })
        return
      }
      if (
        this.order.orderStatus === 'DELIVERED' ||
        this.order.orderStatus === 'COMPLETED' ||
        this.order.orderStatus === 'UNDELIVERED'
      ) {
        uni.navigateTo({ url: '/subpackage/order/applyAfterSales?sn=' + this.sn })
      } else {
        uni.showToast({ icon: 'none', title: '当前订单不能售后', mask: true })
      }
    },
    // 获取订单详情
    getBasicInfo () {
      orderDetails(this.sn, {}).then(res => {
        if (res.code === 200) {
          this.orderStatus = res.data.orderStatusValue
          this.paymentMethodValue = res.data.paymentMethodValue
          this.orderItems = res.data.orderItems
          this.order = res.data.order
          this.temporary_list = res.data.orderItems.slice(0, 2)
        }
      })
    },
    // 查看更多
    more () {
      if (this.openArrowText === '收起') {
        this.openArrowText = '全部打开'
        this.openArrow = '/carts/moreRule.png'
        this.temporary_list = this.orderItems.slice(0, 2)
      } else {
        this.openArrowText = '收起'
        this.openArrow = '/carts/putAway.png'
        this.temporary_list = this.orderItems
      }
    },
    // 按钮
    setOrderButton () {
      let item = this.order
      if (item.orderStatus === 'UNPAID') {
        return [
          { title: '立即支付', styles: 'atOncePay' },
          { title: '取消订单', styles: 'cancelOrder' }
        ]
      }
      // UNDELIVERED:待发货
      if (item.orderStatus === 'UNDELIVERED' || item.orderStatus === 'PAID') {
        return [
          { title: '再次购买', styles: 'buyAgain' },
          { title: '提醒发货', styles: 'remindShipping' },
          { title: '确认收货', styles: 'confirm' }
        ]
      }
      // CANCELLED:已取消
      if (item.orderStatus === 'CANCELLED') {
        return [
          { title: '再次购买', styles: 'buyAgain' },
          { title: '删除订单', styles: 'remindShipping' }
        ]
      }
      // DELIVERED: 待收货
      if (item.orderStatus === 'DELIVERED') {
        return [
          { title: '确认收货', styles: 'confirm' },
          { title: '查看物流', styles: 'checkLogistics' }
        ]
      }
      // COMPLETED: 已完成
      if (item.orderStatus === 'COMPLETED') {
        return [
          { title: '删除订单', styles: 'delOrder' },
          { title: '再次购买', styles: 'buyAgain' }
        ]
      }
    },
    // 订单 各种 按钮
    orderStatusBtn (val) {
      if (val === '立即支付') {
        uni.navigateTo({
          url: '/pages/cashier/index?sn=' + this.sn
        })
      }
      if (val === '取消订单') {
        this.title = '取消订单'
        this.orderStatus = '取消订单'
        this.content = '确认取消订单，取消后将无法恢复订单？'
        this.dialog = true
      }
      if (val === '再次购买') {
        this.title = '再次购买'
        this.orderStatus = '再次购买'
        this.content = '确认再次购买'
        this.dialog = true
        // orderAgainPay(this.sn).then(res => {
        //   if (res.code === 200) {
        //     uni.switchTab({ url: '/pages/shoppingCarts/index', })
        //   }
        // })
      }
      if (val === '提醒发货') {
        remindShipment(this.sn).then(res => {
          console.log(res)
          if (res.code === 200) {
            uni.showToast({ icon: 'success', title: res.msg, mask: true })
          }
        })
      }
      if (val === '确认收货') {
        this.orderStatus = '确认收货'
        this.title = '收货提示'
        this.content = '注意：请确认货物是否收到！确定收货？'
        this.dialog = true
      }
      if (val === '删除订单') {
        this.title = '删除订单'
        this.orderStatus = '删除订单'
        this.content = '确认要删除订单？删除后无法恢复！'
        this.dialog = true
      }
      if (val === '查看物流') {
        uni.navigateTo({
          url: '/subpackage/order/logistics?sn=' + this.sn
        })
      }
    },
    // 对话框 确认按钮
    dialogConfirm () {
      if (this.orderStatus === '再次购买') {
        buyAgain(this.sn)
          .then(res => {
            if (res.code === 200) {
              res.data.forEach((i, j) => {
                addToCart({ num: parseInt(i.num), skuId: i.skuId, orderSn: this.sn }).finally(
                  () => {
                    if (j === res.data.length - 1) {
                      this.dialog = false
                      uni.switchTab({ url: '/pages/shoppingCarts/index' })
                    }
                  }
                )
              })
            }
          })
          .catch(() => {
            uni.showToast({ icon: 'none', title: '失败', mask: true })
          })
      }
      if (this.orderStatus === '取消订单') {
        cancellationOrder(this.sn)
          .then(res => {
            if (res.code === 200) {
              uni.showToast({ icon: 'success', title: '成功', mask: true })
              uni.navigateBack(1)
            }
          })
          .finally(() => {
            this.dialog = false
          })
      }
      if (this.orderStatus === '确认收货') {
        confirmReceipt(this.sn)
          .then(res => {
            if (res.code === 200) {
              uni.showToast({ icon: 'success', title: '成功', mask: true })
              uni.navigateBack(1)
            }
          })
          .finally(() => {
            this.dialog = false
          })
      }
      if (this.orderStatus === '删除订单') {
        deleteOrder(this.sn)
          .then(res => {
            if (res.code === 200) {
              uni.showToast({ icon: 'success', title: '成功', mask: true })
              uni.navigateBack(1)
            }
          })
          .finally(() => {
            this.dialog = false
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.orderInfo_container {
  width: 100%;
  height: 100%;
  background: #f9f9f9;

  .orderStatus {
    height: 222rpx;
    background: linear-gradient(179deg, #2162fc 0%, #46b0fa 100%);
    color: #fff;

    view:nth-child(1) {
      font-size: 29rpx;
      padding: 45.14rpx 0 11.92rpx 45.14rpx;
    }

    view:nth-child(2) {
      font-size: 25rpx;
      padding-left: 45.14rpx;
    }
  }

  .address {
    position: absolute;
    top: 160rpx;
    width: calc(100% - 50rpx);
    background: #fff;
    margin: 0 25rpx;
    overflow: hidden;
    border-radius: 11rpx;

    .one_line {
      margin: 63.89rpx 20.83rpx 22.22rpx;
      font-size: 29rpx;
      font-weight: bold;

      text:nth-child(1) {
        margin-right: 22.22rpx;
      }
    }

    .two_line {
      display: flex;
      margin: 0 10.42rpx;
      padding: 0 10.42rpx 20.83rpx 10.42rpx;
      font-size: 20rpx;
      border-bottom: 2rpx solid #f5f5f5;

      image {
        max-width: 20.14rpx;
        height: 25rpx;
        margin-right: 11.81rpx;
        margin-left: 5.42rpx;
      }

      text {
        opacity: 0.6;
      }
    }
  }

  .goodsList {
    background: #fff;
    margin: 0 25rpx;
    border-radius: 11rpx;

    .title {
      font-size: 29rpx;
      font-weight: bold;
      padding: 38.19rpx 0 20.14rpx 22.22rpx;
      border-bottom: 1px solid #f5f5f5;
    }

    .goods {
      .recommend_item {
        display: flex;
        border-bottom: 1px solid #f5f5f5;

        .num {
          color: #8d8d8d;
          float: right;
          font-size: 25rpx;
          // margin-right: 38.89rpx;
        }

        .original {
          width: 194rpx;
          height: 194rpx;
          background: #ffffff;
          padding: 34.72rpx 21rpx;
          margin: 44.44rpx 59.03rpx 58.33rpx 37.5rpx;
          box-sizing: border-box;
        }

        .goodsName {
          font-size: 29rpx;
          margin-top: 38.19rpx;
          margin-bottom: 19.44rpx;
          display: flex;
          justify-content: space-between;

          text:nth-child(1) {
            width: 80%;
          }
        }

        .simpleSpecs {
          font-size: 21rpx;
          margin-bottom: 14.58rpx;
          color: #8d8d8d;
        }

        .expirationDate {
          font-size: 21rpx;
          margin-bottom: 14.58rpx;
          color: #8d8d8d;
        }

        ._icon {
          width: 20rpx;
          height: 20rpx;
          vertical-align: middle;
          margin-right: 7.64rpx;
        }

        .manufacturer {
          font-size: 20rpx;
          margin-bottom: 14.58rpx;
          color: #8d8d8d;
        }

        .activityType {
          display: inline-block;
          font-size: 19rpx;
          color: #ef231b;
          border: 1px solid #ef231b;
          padding: 0 8.6rpx;
          border-radius: 4rpx;
          margin-top: 13.89rpx;
        }

        .prices {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-top: 25rpx;

          view {
            color: #ec1818;
            font-weight: bold;
            font-size: 30rpx;

            text {
              font-size: 25rpx;
              font-weight: normal;
              color: #8d8d8d;
              margin-left: 6.94rpx;
            }
          }
        }
      }

      .more {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 27.38rpx 0;

        text {
          font-size: 29rpx;
          font-weight: bold;
        }

        image {
          max-width: 16.67rpx;
          height: 11.11rpx;
          margin-left: 12.5rpx;
        }
      }
    }
  }

  .payment {
    background: #fff;
    margin: 0 25rpx;
    margin-top: 20.83rpx;
    border-radius: 11rpx;
    // padding: 45.83rpx 37.5rpx 50rpx 22.22rpx;
    padding-top: 45.83rpx;
    padding-bottom: 50rpx;

    view {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 29rpx;
      margin-bottom: 47.92rpx;
      padding-left: 22.22rpx;
      padding-right: 37.5rpx;

      .price {
        color: #ec1818;
        font-size: 33rpx;
      }

      .coupon {
        opacity: 0.6;
        font-weight: normal;
      }

      .prices {
        color: #ec1818;
      }

      image {
        width: 9.72rpx;
        height: 15.28rpx;
        margin-left: 20rpx;
      }
    }

    view:last-child {
      justify-content: flex-end;
      border-top: 1px solid #f3f3f3;
      margin-bottom: 0;
      padding-top: 35.42rpx;
    }
  }

  .orderInfo {
    background: #fff;
    margin: 25rpx;
    padding: 63.89rpx 0 63.89rpx 20.14rpx;
    font-size: 29rpx;

    .title {
      font-weight: bold;
      margin-bottom: 47.92rpx;
    }

    .item {
      margin-bottom: 47.92rpx;

      text:nth-child(1) {
        color: #585858;
        margin-right: 50rpx;
      }
    }
  }

  .bottom {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 104rpx;
    background: #ffffff;
    line-height: 104rpx;
    text-align: end;

    text {
      display: inline-block;
      width: 142rpx;
      height: 58rpx;
      font-size: 25rpx;
      border: 1px solid #2871fc;
      border-radius: 29rpx;
      line-height: 57rpx;
      text-align: center;
      margin-left: 24.41rpx;
    }

    text:last-child {
      margin-right: 50rpx;
    }

    .afterSales,
    .cancelOrder {
      color: #585858;
      border: 1px solid #585858;
    }

    .atOncePay,
    .confirm,
    .remindShipping {
      color: #ef231b;
      border: 1px solid #ef231b;
    }
  }
}
</style>
